import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { DNavBar } from '@/components'
import http from '@/api'
import './index.scss'
import { handleIdCard, handlePhone } from '@/utils'

export default class PersonDetail extends Component {
    state = {
        inreviewIcon: require('../../../assets/images/icon／审核中@2x.png'),
        verifiedIcon: require('../../../assets/images/icon／已认证@2x.png'),
        refusedIcon: require('../../../assets/images/icon／被拒绝@2x.png'),
        userInfo: '',
        personDetail: ''
    }

    componentDidShow() {
        this.getUserInfo()
    }

    async getUserInfo() {
        let userInfo = await http.myselfDetail()
        this.setState({
            userInfo
        })
        this.getPersonalAuthInfo(userInfo.id)
    }

    async getPersonalAuthInfo(id) {
        let personDetail = await http.getPersonalAuthInfo({ id })
        this.setState({
            personDetail
        })
    }
    filterApplyStatus() {
        const { personDetail, inreviewIcon, verifiedIcon, refusedIcon } = this.state
        switch (personDetail.authStatus) {
            case '1':
                return inreviewIcon
            case '2':
                return verifiedIcon
            case '3':
                return refusedIcon
            default:
                break;
        }

    }
    applyStatusText() {
        let { personDetail } = this.state
        if (personDetail.authStatus == 1) {
            return '审核中'
        } else if (personDetail.authStatus == 2) {
            return '已认证'
        } else if (personDetail.authStatus == 3) {
            return '被拒绝'
        }
    }

    render() {
        const { personDetail, userInfo } = this.state

        return (
            <View className="b_person_detail">
                <DNavBar title="个人认证详情"></DNavBar>
                <View className="container">
                    <View className="user_info">
                        <View className="info_item">
                            <Text className="info_item_label">姓名</Text>
                            <Text className="info_item_value">{personDetail.imCardUrl}</Text>
                        </View>
                        <View className="info_item">
                            <Text className="info_item_label">身份证号码</Text>
                            <Text className="info_item_value">{personDetail.imCard && handleIdCard(personDetail.imCard)}</Text>
                        </View>
                        <View className="info_item">
                            <Text className="info_item_label">手机号码</Text>
                            <Text className="info_item_value">{personDetail.imCard && handlePhone(personDetail.imPhone)}</Text>
                        </View>
                        <View className="info_item">
                            <Text className="info_item_label">身份证图片</Text>
                            <Text className="info_item_value"></Text>
                        </View>
                        <View className="idcard_img">
                            <Image className="img" src={personDetail.imIdcardBakUrl}></Image>
                            <Image className="img" src={personDetail.imIdcardUrl}></Image>
                        </View>
                        {
                            personDetail && <Image className="apply_status_img" src={this.filterApplyStatus.bind(this)()}></Image>
                        }
                    </View>

                    <View className="border"></View>

                    <View className="apply_info">
                        <View className="info_item">
                            <Text className="info_item_label">提交认证时间</Text>
                            <Text className="info_item_value">{personDetail.createTime}</Text>
                        </View>
                        <View className="info_item">
                            <Text className="info_item_label">审核状态</Text>
                            <Text className="info_item_value">{this.applyStatusText.bind(this)()}</Text>
                        </View>
                        {
                            personDetail.authStatus != 1 && <View className="info_item">
                                <Text className="info_item_label">审核时间</Text>
                                <Text className="info_item_value">{personDetail.authTime}</Text>
                            </View>
                        }

                        {
                            personDetail.authStatus == 3 && <View className="info_item">
                                <Text className="info_item_label">审核原因</Text>
                                <Text className="info_item_value">{decodeURI(personDetail.authDesc)}</Text>
                            </View>
                        }
                        {
                            personDetail.authStatus == 3 && <AtButton className="btn" onClick={() => {
                                Taro.navigateTo({
                                    url: `/pages/myinfo/personalcert?id=${userInfo.id}`
                                })
                            }}>重新认证</AtButton>
                        }
                    </View>
                </View>
            </View>
        )
    }
}
